<template>
  <el-form-item v-bind="createFormProps(config)">
    <template v-if="config.type === 'download'">
      <div v-for="i in config.default">
        <el-link type="primary" underline="never">{{ i.name }}</el-link>
      </div>
    </template>
    <component
      v-else
      v-model="value"
      :is="config.type"
      v-bind="createFieldProps(config)"
      style="width: 100%"
    >
      <template v-if="config.type === 'el-select'">
        <el-option v-for="o in config.options" :value="o.value" :label="o.label" />
      </template>
      <template v-if="['checkbox', 'el-checkbox-group'].includes(config.type)">
        <el-checkbox :style="config.props" v-for="o in config.options" :value="o.value">
          {{ o.label }}
        </el-checkbox>
      </template>
      <template v-if="['radio', 'el-radio-group'].includes(config.type)">
        <el-radio v-for="o in config.options" :value="o.value">
          {{ o.label }}
        </el-radio>
      </template>
      <template v-if="config.type === 'el-upload'" #trigger>
        <el-button type="primary">上传</el-button>
      </template>
    </component>
    <template v-if="config.desc && config.desc.left" #label>
      <div style="display: flex; align-items: center">
        {{ config.label }}
        <el-tooltip
          :content="config.desc?.text || config.desc"
          placement="top-start"
          effect="light"
        >
          <el-icon :size="16" style="margin-left: 5px"><Warning /></el-icon>
        </el-tooltip>
      </div>
    </template>
    <div v-if="config.desc && !config.desc.left" class="rignt-icon">
      <el-tooltip :content="config.desc?.text || config.desc" placement="top-end" effect="light">
        <el-icon :size="18"><Warning /></el-icon>
      </el-tooltip>
    </div>
  </el-form-item>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import type { FieldType } from './type.d';
import { Warning } from '@element-plus/icons-vue';
type Props = {
  prop?: string;
  modelValue: any;
  config: FieldType;
  labelWidth?: string;
};
const props = defineProps<Props>();

const defaultValue = () => {
  const { type } = props.config;
  if (typeof props.modelValue !== 'undefined') return props.modelValue;
  if (props.config.default) return props.config.default;
  if (type === 'el-switch') return true;
  if (type === 'el-select' && props.config?.props?.multiple) return [];
  if (type === 'el-date-picker' && props.config.props.type === 'daterange') return [];
  if (['list', 'el-checkbox-group'].includes(type)) return [];
  return '';
};
const value = ref(defaultValue());
const emit = defineEmits(['update:modelValue']);

watch(
  () => props.modelValue,
  () => {
    value.value = props.modelValue;
  },
  { deep: true }
);

watch(
  value,
  () => {
    emit('update:modelValue', value.value);
  },
  { immediate: true }
);

const createFormProps = field => {
  const rules: any = [];
  if (field.required) {
    rules.push({
      required: true,
      trigger: 'change',
      message: createPlaceholder(field)
    });
  }
  return {
    rules,
    labelWidth: props.labelWidth,
    prop: props.prop || field.prop,
    label: props.labelWidth ? '' : field.label
  };
};
const createFieldProps = field => {
  return { placeholder: createPlaceholder(field), ...field.props };
};
const createPlaceholder = field => {
  if ('el-input' === field.type) return `请输入${field.label}`;
  return `请选择${field.label}`;
};
</script>

<style scoped lang="less">
.rignt-icon {
  position: absolute;
  right: -25px;
  top: 4px;
  color: var(--el-text-color-regular);
  cursor: pointer;
}
</style>
